<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
	<title>湖南省自来水公司营销管理信息系统</title> 
	
	<link rel="stylesheet" href="../css/reset.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/text.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/form.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/buttons.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen" title="no title" />	
	<link rel="stylesheet" href="../css/layout.css" type="text/css" media="screen" title="no title" />	
	
	<link rel="stylesheet" href="../css/ui-darkness/jquery-ui-1.8.12.custom.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/jquery.visualize.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/facebox.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/uniform.default.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/dataTables.css" type="text/css" media="screen" title="no title" />
	
	<link rel="stylesheet" href="../css/custom.css" type="text/css" media="screen" title="no title">
	<script src="../js/jquery/jquery-3.3.1.js"></script>
	<script src="/webjars/vue/2.5.17/dist/vue.js"></script>
	<script src="../js/bootstrap.min.js"></script>
	<style>
		.a{
			color: red;
		}
	</style>
	<script>
		var url=new URLSearchParams(location.search);
		var id=url.get("id");
		var name=url.get("vname");
		var mark=url.get("vmark");
		$(function(){
			$("#vid").val(id);
			if(name=="null"){
				$("#name").val();
			}else{
				$("#name").val(name);
			}
			$("#description").val(mark);
		})



	</script>
</head> 
 
<body> 

<div id="wrapper">



	<div id="bool"><script>window.onload=function (){  $("#bool").load("../ming.html");}</script></div>


	<div id="content" class="xgrid">
		
 		
		<div class="x12">
			
			<h2>添加/修改表册信息</h2>
			
			<div class="form label-inline uniform">
	
				<div class="field"><label for="id">表册ID</label> <input id="id" name="fname" size="50" type="text" class="medium" disabled="disabled" value="自动生成" />
				<input id="vid" type="hidden">
				</div>
				
				<div class="field"><label for="name">表册名称</label> <input id="name"  name="lname" size="50" type="text" class="medium" /><span id="lname" class="a">*</span></div>
				
				<div class="field"><label for="name">所属辖区</label> 
					<select id="area"  name="sel">
						<option value="">未选择</option>
						<option v-for="xq in xq" :value="xq.id">
							{{xq.areaName}}
						</option>
					</select><span id="sel" class="a">*</span>
				</div>
							
				<div class="field"><label for="description">备注</label> <textarea rows="7" cols="50" id="description" name="description"></textarea></div>

				<div class="buttonrow">
					<button class="btn" @click="add()">保存</button>
					<button class="btn btn-grey" onClick="history.back(-1);">返回</button>
				</div>

			</div>
			
		</div> <!-- .x12 -->
		
	</div>
	<script>
		var content=new Vue({
			el:"#content",
			data:{
				xq:"",//辖区
				volume: {},//表册
			},
			methods:{
				add(){
					var boolean=true;

					if($("#name").val()==''){
						alert("表册名称不能为空") ;
						boolean = false;
						return false;
					}
					//alert($("#area").val())
					if($("#area").val()=='' || $("#area").val()==null){
						alert("请选择辖区");
						boolean = false;
						return false;
					}


					if(boolean) {
						content.volume.volumeName=$("#name").val();
						content.volume.remark=$("#description").val();
						content.volume.areaID=$("#area").val();
						var val=$("#vid").val();
						if(val==null||val==""){//添加
						$.post("/rd-volume/add", content.volume, function (data) {
							if (data.code == "200") {
								alert("success");
							}else{
								alert("哦豁，出错了")
							}

						});
						}else{//修改
							content.volume.id=val;
							$.ajax({
								type: "PUT",
								url: "/rd-volume/updateVolume",
								data: content.volume,
								success: function(data){
									if(data.code=="200"){
										alert("修改成功!")
									}else{
										alert("哦豁，出错了")
									}
								}
							});
						}
					}
				}
			},
			created(){
				//页面加载，查询下拉列表中的辖区，调用系统里的查询辖区方法
				$.getJSON("/SyArea/queryall",function(json){
					content.xq=json;
				});
			}
		})
	</script>

	
	<div id="footer">		
		<div class="content_pad">			
			<p>&copy; 2013-11 版权所有 <a href="#">湖南省自来水公司</a>.   技术支持 <a href="#">职业教育</a>.</p>
		</div> <!-- .content_pad -->
	</div> <!-- #footer -->
	
</div> <!-- #wrapper -->

<script src="../js/jquery/jquery-1.5.2.min.js"></script>
<script src="../js/jquery/jquery-ui-1.8.12.custom.min.js"></script>
<script src="../js/misc/excanvas.min.js"></script>
<script src="../js/jquery/facebox.js"></script>
<script src="../js/jquery/jquery.visualize.js"></script>
<script src="../js/jquery/jquery.dataTables.min.js"></script>
<script src="../js/jquery/jquery.tablesorter.min.js"></script>
<script src="../js/jquery/jquery.uniform.min.js"></script>
<script src="../js/jquery/jquery.placeholder.min.js"></script>

<script src="../js/widgets.js"></script>
<script src="../js/dashboard.js"></script>

<script type="text/javascript">
	
$(document).ready ( function () 
{
	Dashboard.init ();		
});

</script>

</body> 
 
</html>